<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../script/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			body {
				color: #3E9FEC;
				background-color: #FFF;
			}
			.mui-table-view-cell:after {
				background-color: #E2E2E4
			}
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.wrong {
				color: #e02a53
			}
			.undo {
				color: #4fd2c2;
			}
			.item-col {
				width: 20%;
				float: left;
				margin-top: 15px;
				margin-bottom: 10px;
			}
			.item {
				background-color: #f0f0f0;
				width: 32px;
				height: 32px;
				font-size: 14px;
				line-height: 32px;
				text-align: center;
				border-radius: 16px;
				margin: 0px auto;
			}
			.itempad {
				/*margin-top: 80px;*/
				
				padding: 20px 50px;
			}
			.itempad p {
				color: #fff;
				font-size: 15px;
			}
			.items-row {} .mui-btn-positive {
				background-color: #4fd2c2;
				border: 1px solid #4fd2c2;
			}
			.itempad2 .items-row {
				padding: 50px 50px;
				background-color: #fff;
			}
			.itempad2 .items-row p {
				font-size: 15px;
				color: #30A4ED;
				text-align: center;
			}
			.mui-table-view-cell>.mui-btn {
				position: relative;
				transform: translateY(0);
				right: 0px;
				margin-top: 20px;
			}
			.mui-btn-block {
				padding: 8px 0px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="content">

		</div>

		<script type="text/html" id="contentTem">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<h4>课程描述:</h4>
					<p id="title">{{#title}}</p>
					<p>总金额:{{price}}元</p>
				</li>
				<li class="mui-table-view-cell">
					<h4>课程内容:</h4>
					<p>{{about}}</p>
					<h5 style="font-weight: bold;">该课程包含付费试题{{count}}套:</h5>
					<p>
						{{each content}} {{$value.title}}<br/> {{/each}}
					</p>
				</li>
				<li class="mui-table-view-cell">
					<button class="mui-btn mui-btn-positive mui-btn-block" id="buy">&nbsp;&nbsp;确认下单&nbsp;&nbsp;</button>
				</li>
			</ul>
		</script>

		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			template.helper('$parse', function(data) {
				return JSON.parse(data.replace(/\\\\/g, "\\"));
			});
			template.helper('$toObj', function(data) {
				return JSON.parse(data);
			});

			function success(ret) {
				var html = template('contentTem', ret.data);
				document.getElementById("content").innerHTML = html;
				hideWaiting();
				document.getElementById("buy").addEventListener('tap', function() {
					showWaiting();
					var key = getUserKey();
					var courseid = ret.data.id;
					var data = {
						key: key,
						courseid: courseid
					}
					var url = MYAPP.webroot + "/api/index.php/Home/Order/buildOrder";
					api.ajax({
						url: url,
						method: 'post',
						timeout: 30,
						dataType: 'json',
						data: {
							values: data
						},
						returnAll: false
					}, function(ret, err) {
						if (ret) {
							hideWaiting();
							if (ret.code != "200") {
								api.toast({
									msg: ret.error
								});
							} else {
								api.toast({
									msg: ret.msg
								});
								api.openWin({
									name: 'order-detail',
									url: 'order-detail.html',
									pageParam: {
										id: ret.orderid
									}
								});
							}
						} else {
							api.toast({
								msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
								location: 'middle',
								duration: 1000
							});
						}
					});
				});
			}

			function loadResulst(id) {
				showWaiting("稍等一下哦！");
				var url = MYAPP.webroot + "/api/index.php/Home/Index/courseDetail";
				var data = {
					id: id
				};
				api.ajax({
					url: url,
					method: 'post',
					timeout: 30,
					dataType: 'json',
					data: {
						values: data
					},
					returnAll: false
				}, function(ret, err) {
					if (ret) {
						success(ret);
					} else {
						api.toast({
							msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
							location: 'middle',
							duration: 1000
						});
					}
				});
			}
			apiready = function() {
				var data = api.pageParam;
				loadResulst(data.id);
				api.addEventListener({
				    name: 'paysuccess'
				}, function(ret, err){
				    api.closeWin();
				});
			};
		</script>
	</body>

</html>